<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 头部 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <el-button size="small" type="primary" @click="addFn">添加房产</el-button>
          </el-col>
          <!-- 右边 -->
          <el-col :span="12">
            <el-row type="flex" justify="space-between">
              <el-select v-model="agent" placeholder="全部经纪" size="small">
                <el-option label="全部经纪" :value="null" />
                <el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="category" placeholder="全部分类" size="small">
                <el-option label="全部分类" :value="null" />
                <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id" />
              </el-select>
              <el-input v-model="title_contains" size="small" placeholder="请输入内容" />
              <el-button size="small" @click="searchFn">筛选</el-button>
            </el-row>
          </el-col>
        </el-row>

        <!-- ....头部..分割线..表格.... -->
        <el-divider />

        <!-- 表格 -->
        <el-table
          :data="propertyList"
          border
          style="width: 100%"
        >
          <el-table-column label="封面" prop="image">
            <template v-slot="{row}">
              <img :src="row.image" alt="" class="fengmian">
            </template>
          </el-table-column>
          <el-table-column label="标题" prop="title" />
          <el-table-column label="标签" prop="tags">
            <template v-slot="{row}">
              <el-tag
                v-for="(item,index) in row.tags"
                :key="index"
                type="success"
                style="margin-right:5px"
              >
                {{ item }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="地址" prop="address" />
          <el-table-column label="分类" prop="category.title" />
          <el-table-column label="经纪" prop="agent.name" />
          <el-table-column label="价格" prop="price" />
          <el-table-column label="介绍" prop="content">
            <template v-slot="{row}">
              <div v-html="row.content" />
            </template>
          </el-table-column>
          <el-table-column label="图片" prop="photos">
            <template v-slot="{row}">
              <img v-for="(item,index) in row.photos" :key="index" :src="item" alt="" class="photos">
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="" width="150">
            <template v-slot="{row}">
              <el-button size="mini" type="primary" @click="editFn(row.id)">编辑</el-button>
              <el-button size="mini" type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-row type="flex" justify="center">
          <el-pagination
            style="margin-top: 20px"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>

        <!-- 弹窗 -->
        <diaLog
          v-if="dialogVisible"
          ref="dialog"
          :property-id.sync="id"
          :dialog-visible.sync="dialogVisible"
          @getList="getList"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getPropertyList, getPropertyCount, delProperty } from '@/api/property' // 房产api
import { agentsList } from '@/api/agents' // 获取经纪列表
import { category } from '@/api/category' // 获取分类列表

import diaLog from './components/diaLog.vue'

export default {
  components: { diaLog },
  data() {
    return {
      // 分页
      total: 0, // 总条数
      currentPage4: 1, // 当前页数
      limit: 5, // 显示条数
      start: 0, // 获取房产列表开始的下标

      propertyList: [], // 房产列表
      agent: null, // 经纪(搜索)
      category: null, // 分类(搜索)
      title_contains: '', // 标题(搜索)
      agentList: [], // 经纪列表
      categoryList: [], // 分类列表
      id: null,

      // 弹窗
      dialogVisible: false
    }
  },
  async created() {
    this.agentList = await agentsList() // 经纪列表
    this.categoryList = await category() // 分类列表
    // 渲染列表
    this.getList()
    // 房产总数
    // this.getTotal()
  },
  methods: {
    // 封装获取列表函数
    async getList() {
      // 获取总数
      this.setTotal()

      // 获取列表
      const res = await getPropertyList({
        _limit: this.limit, // 最大条数
        _start: this.start, // 获取开始的位置
        title_contains: this.title_contains,
        agent: this.agent,
        category: this.category
      })
      // console.log(...res)
      this.propertyList = res
      // this.total = this.propertyList.length
    },

    // 封装房产总数
    async setTotal() {
      const res = await getPropertyCount({
        _limit: this.limit, // 最大条数
        _start: this.start, // 获取开始的位置
        title_contains: this.title_contains,
        agent: this.agent,
        category: this.category
      })
      // console.log('条', res)
      this.total = res
    },

    handleSizeChange(size) { // size-change触发
    // 改变每页条数
      this.limit = size
      // 刷新列表
      this.getList()
    },
    handleCurrentChange(num) { // CurrentChange触发
      this.start = this.limit * num - this.limit
      // console.log(this.start)
      this.getList() // 刷新列表
    },
    // 搜索按钮
    searchFn() {
      // 刷新列表
      this.getList()
    },
    // 点击添加按钮
    addFn() {
      this.dialogVisible = true
    },
    // 编辑按钮
    editFn(id) {
      // console.log(id)
      this.id = id
      this.dialogVisible = true
    },
    // 删除按钮
    delFn(id) {
      this.$confirm('删除该房产信息?', 'delete', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delProperty(id)
        this.getList()

        this.$message({
          type: 'success',
          message: '删除成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除失败'
        })
      })
    }
  }
}
</script>

<style  lang="scss" scoped>
.fengmian {
  width: 100%;
  // height: 120px;
  object-fit: contain;
}
.photos{
  width: 60px;
  object-fit: contain;

}
</style>
